import { Meta } from '@storybook/addon-docs/blocks';
import { Typography, Card, Space, List, Alert, Divider } from 'antd';

<Meta title="Usage Guides" />

<div style={{ padding: '24px' }}>
  <Space direction="vertical" size="large" style={{ width: '100%' }}>
    <div>
      <Typography.Title level={1}>
        📚 Usage Guides
      </Typography.Title>
      <Typography.Text>Practical examples and patterns for using Fetcher in your applications</Typography.Text>
    </div>

    <Alert
      message="🚀 Quick Start"
      description="Choose your integration level: Core HTTP client, Declarative APIs, or Framework-specific hooks"
      type="info"
      showIcon
      style={{ marginBottom: 24 }}
    />

    <Card>
      <Typography.Title level={4}>📋 Key Concepts</Typography.Title>
      <List
        size="small"
        dataSource={[
          '**Fetcher Instance**: Core HTTP client with interceptors and configuration',
          '**Named Fetcher**: Pre-configured fetcher instances for different APIs',
          '**Decorators**: Declarative API service definitions with automatic implementation',
          '**Interceptors**: Middleware for requests and responses (auth, logging, etc.)',
          '**Event Streaming**: Real-time data handling with Server-Sent Events',
          '**React Hooks**: Data fetching with automatic re-rendering and state management'
        ]}
        renderItem={(item) => <List.Item><span dangerouslySetInnerHTML={{ __html: item }} /></List.Item>}
      />
    </Card>

    <Card>
      <Typography.Title level={4}>Basic HTTP Client</Typography.Title>
      <Typography.Paragraph>Get started with the core Fetcher package for simple HTTP requests.</Typography.Paragraph>
      <pre style={{
        background: '#f6f8fa',
        border: '1px solid #d1d9e0',
        borderRadius: '6px',
        padding: '16px',
        overflow: 'auto',
        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
        fontSize: '14px'
      }}>{`import { Fetcher } from '@ahoo-wang/fetcher';

// Create a fetcher instance
const fetcher = new Fetcher({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 5000,
});

// GET request with path parameters
const user = await fetcher.get('/users/{id}', {
urlParams: {
path: { id: 1 },
},
});

// POST request with JSON body
const newPost = await fetcher.post('/posts', {
body: {
title: 'New Post',
body: 'Post content',
userId: 1,
},
});

// PUT request with query parameters
const updatedPost = await fetcher.put('/posts/{id}', {
urlParams: {
path: { id: 1 },
query: { \_method: 'PUT' },
},
body: { title: 'Updated Title' },
});`}</pre>

    </Card>

    <Card>
      <Typography.Title level={4}>Declarative API Services</Typography.Title>
      <Typography.Paragraph>Use decorators to create clean, type-safe service classes.</Typography.Paragraph>
      <pre style={{
        background: '#f6f8fa',
        border: '1px solid #d1d9e0',
        borderRadius: '6px',
        padding: '16px',
        overflow: 'auto',
        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
        fontSize: '14px'
      }}>{`import { NamedFetcher } from '@ahoo-wang/fetcher';

import {
  api,
  get,
  post,
  put,
  del,
  path,
  query,
  body,
} from '@ahoo-wang/fetcher-decorator';

// Register a named fetcher
const apiFetcher = new NamedFetcher('api', {
baseURL: 'https://jsonplaceholder.typicode.com',
});

// Define service with decorators
@api('/users', { fetcher: 'api' })
class UserService {
@get('/')
getUsers(@query('limit') limit?: number): Promise<User[]> {
throw new Error('Auto-generated method');
}

@get('/{id}')
getUser(@path('id') id: number): Promise<User> {
throw new Error('Auto-generated method');
}

@post('/')
createUser(@body() user: Omit<User, 'id'>): Promise<User> {
throw new Error('Auto-generated method');
}

@put('/{id}')
updateUser(@path('id') id: number, @body() user: Partial<User>): Promise<User> {
throw new Error('Auto-generated method');
}

@del('/{id}')
deleteUser(@path('id') id: number): Promise<void> {
throw new Error('Auto-generated method');
}
}

// Use the service
const userService = new UserService();
const users = await userService.getUsers(10);
const user = await userService.getUser(1);`}</pre>

    </Card>

    <Card>
      <Typography.Title level={4}>Real-Time Streaming & LLM Support</Typography.Title>
      <Typography.Paragraph>Handle Server-Sent Events and streaming LLM responses.</Typography.Paragraph>
      <pre style={{
        background: '#f6f8fa',
        border: '1px solid #d1d9e0',
        borderRadius: '6px',
        padding: '16px',
        overflow: 'auto',
        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
        fontSize: '14px'
      }}>{`import { Fetcher } from '@ahoo-wang/fetcher';

import { EventStreamInterceptor } from '@ahoo-wang/fetcher-eventstream';

const fetcher = new Fetcher({ baseURL: 'https://api.example.com' });
fetcher.interceptors.response.use(new EventStreamInterceptor());

// Generic SSE streaming
const eventStream = await fetcher.get('/events');
if (eventStream.eventStream) {
for await (const event of eventStream.eventStream()) {
console.log('Event:', event.data, event.event, event.id);
}
}

// LLM streaming (OpenAI-style)
const llmResponse = await fetcher.post('/chat/completions', {
body: {
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: 'Hello!' }],
stream: true,
},
});

if (llmResponse.jsonEventStream) {
for await (const event of llmResponse.jsonEventStream<ChatCompletionChunk>()) {
const content = event.data.choices[0]?.delta?.content || '';
process.stdout.write(content); // Real-time output
}
}`}</pre>

    </Card>

    <Card>
      <Typography.Title level={4}>Event Bus for Cross-Tab Communication</Typography.Title>
      <Typography.Paragraph>Use the event bus for local and cross-tab event handling.</Typography.Paragraph>
      <pre style={{
        background: '#f6f8fa',
        border: '1px solid #d1d9e0',
        borderRadius: '6px',
        padding: '16px',
        overflow: 'auto',
        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
        fontSize: '14px'
      }}>{`import {

BroadcastTypedEventBus,
SerialTypedEventBus,
} from '@ahoo-wang/fetcher-eventbus';

// Define event types
interface AppEvents {
'user-action': { action: string; userId: number };
'data-updated': { type: string; id: number };
}

// Create delegate for local event handling
const delegate = new SerialTypedEventBus<AppEvents>('app-events');

// Create broadcast event bus for cross-tab communication
const eventBus = new BroadcastTypedEventBus(delegate);

// Add event handlers
eventBus.on({
name: 'user-action',
order: 1,
handle: async (event) => {
console.log('User action:', event.action);
// Handle user action
},
});

eventBus.on({
name: 'data-updated',
order: 2,
handle: async (event) => {
console.log('Data updated:', event.type, event.id);
// Refresh data or update UI
},
});

// Emit events (local and cross-tab)
await eventBus.emit('user-action', { action: 'login', userId: 123 });
await eventBus.emit('data-updated', { type: 'user', id: 123 });`}</pre>

    </Card>

    <Card>
      <Typography.Title level={4}>Powerful Interceptors</Typography.Title>
      <Typography.Paragraph>Add middleware for authentication, logging, and error handling.</Typography.Paragraph>
      <pre style={{
        background: '#f6f8fa',
        border: '1px solid #d1d9e0',
        borderRadius: '6px',
        padding: '16px',
        overflow: 'auto',
        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
        fontSize: '14px'
      }}>{`import { Fetcher } from '@ahoo-wang/fetcher';

const fetcher = new Fetcher({ baseURL: 'https://api.example.com' });

// Request interceptor for authentication
fetcher.interceptors.request.use({
name: 'auth-interceptor',
order: 100,
intercept(exchange) {
const token = localStorage.getItem('auth-token');
if (token) {
exchange.request.headers.Authorization = \`Bearer \${token}\`;
}
},
});

// Request interceptor for request ID
fetcher.interceptors.request.use({
name: 'request-id-interceptor',
order: 50,
intercept(exchange) {
exchange.request.headers['X-Request-ID'] = generateRequestId();
},
});

// Response interceptor for logging
fetcher.interceptors.response.use({
name: 'logging-interceptor',
order: 10,
intercept(exchange) {
console.log(\`\${exchange.request.method} \${exchange.request.url} - \${exchange.response.status}\`);
},
});

// Response interceptor for error handling
fetcher.interceptors.response.use({
name: 'error-interceptor',
order: 1,
intercept(exchange) {
if (!exchange.response.ok) {
throw new Error(\`HTTP \${exchange.response.status}: \${exchange.response.statusText}\`);
}
},
});`}</pre>

    </Card>

    <Card>
      <Typography.Title level={4}>React Integration</Typography.Title>
      <Typography.Paragraph>Use React hooks for data fetching with automatic re-rendering.</Typography.Paragraph>
      <pre style={{
        background: '#f6f8fa',
        border: '1px solid #d1d9e0',
        borderRadius: '6px',
        padding: '16px',
        overflow: 'auto',
        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
        fontSize: '14px'
      }}>{`import { useFetcher } from '@ahoo-wang/fetcher-react';

function UserProfile({ userId }: { userId: number }) {
const { data, loading, error } = useFetcher(
\`/users/\${userId}\`,
{ method: 'GET' },
[userId] // Dependencies for re-fetching
);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>No data</div>;

return (

<div>
  <h2>{data.name}</h2>
  <p>{data.email}</p>
</div>
); }

// Custom hook for user operations
function useUserActions() {
const fetcher = useFetcher();

const createUser = useCallback(async (userData: UserData) => {
return await fetcher('/users', {
method: 'POST',
body: userData,
});
}, [fetcher]);

const updateUser = useCallback(async (id: number, userData: Partial<UserData>) => {
return await fetcher(\`/users/\${id}\`, {
method: 'PUT',
body: userData,
});
}, [fetcher]);

return { createUser, updateUser };
}`}</pre>

    </Card>

    <Card>
      <Typography.Title level={4}>CQRS/DDD with Wow Framework</Typography.Title>
      <Typography.Paragraph>Use command and query clients for domain-driven design.</Typography.Paragraph>
      <pre style={{
        background: '#f6f8fa',
        border: '1px solid #d1d9e0',
        borderRadius: '6px',
        padding: '16px',
        overflow: 'auto',
        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
        fontSize: '14px'
      }}>{`import {

CommandClient,
SnapshotQueryClient,
EventStreamQueryClient,
} from '@ahoo-wang/fetcher-wow';

const commandClient = new CommandClient({
baseURL: 'https://api.example.com/commands',
});

const queryClient = new SnapshotQueryClient({
baseURL: 'https://api.example.com/queries',
});

const streamClient = new EventStreamQueryClient({
baseURL: 'https://api.example.com/streams',
});

// Send commands
const result = await commandClient.send('CreateUser', {
userId: 'user-123',
email: 'user@example.com',
name: 'John Doe',
});

// Query snapshots
const users = await queryClient.list('UserSummary', {
page: 1,
size: 20,
sort: 'name',
});

const user = await queryClient.single('UserDetails', {
userId: 'user-123',
});

// Stream events
const userEvents = await streamClient.stream('UserEvents', {
userId: 'user-123',
});

for await (const event of userEvents) {
console.log('User event:', event);
}`}</pre>

    </Card>

    <Divider />

    <Card>
      <Typography.Title level={4}>💡 Best Practices</Typography.Title>
      <Space direction="vertical" size="medium">
        <div>
          <Typography.Text strong>🔧 Configuration</Typography.Text>
          <List
            size="small"
            dataSource={[
              'Use named fetchers for different API endpoints',
              'Configure timeouts appropriately for your use case',
              'Set up interceptors for cross-cutting concerns (auth, logging)',
              'Use environment variables for base URLs and secrets'
            ]}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </div>

        <div>
          <Typography.Text strong>🎯 Error Handling</Typography.Text>
          <List
            size="small"
            dataSource={[
              'Implement response interceptors for centralized error handling',
              'Use try-catch blocks for expected errors',
              'Handle network failures gracefully with retry logic',
              'Provide meaningful error messages to users'
            ]}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </div>

        <div>
          <Typography.Text strong>⚡ Performance</Typography.Text>
          <List
            size="small"
            dataSource={[
              'Reuse fetcher instances instead of creating new ones',
              'Use appropriate timeouts to prevent hanging requests',
              'Implement caching strategies for frequently accessed data',
              'Consider request/response compression for large payloads'
            ]}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </div>
      </Space>
    </Card>

  </Space>
</div>
